<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图模仿</title>
	<style>
		* {
			/* 去掉默认的样式 */
			margin: 0px;
			padding: 0px;
		}

		a{
			text-decoration: none;
			/*text-align: center;*/
			line-height:  30px;
			color: #fff;
			font-size: 20px;
		}

		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: orange;
			margin: 100px auto;
		}

		/* 这个箭头只能用定位做，才能放在图片上面，浮动不行 */ 
		.arrow-l {
			/* 要求箭头不占位置，所以用绝对定位 */
			position: absolute;
			/* 利用垂直定位的公式，使盒子居中 */
			top: 50%;
			margin-top: -15px;
			left: 0px;
			/* 绝对定位的盒子无需转换，直接给大小就行了 */
			width: 20px;
			height: 30px;
			/* 颜色是黑色半透明的 */
			background-color: rgba(0, 0, 0, .2);

			/* 变成圆形的图形 */
			/* 右上角 */
			/* 右下角 */
			border-top-right-radius: 15px;
			border-bottom-right-radius:15px;
		}

		.arrow-r {
			/* 要求箭头不占位置，所以用绝对定位 */
			position: absolute;
			/* 利用垂直定位的公式，使盒子居中 */
			top: 50%;
			margin-top: -15px;
			right: 0px;
			/* 绝对定位的盒子无需转换，直接给大小就行了 */
			width: 20px;
			height: 30px;
			/* 颜色是黑色半透明的 */
			background-color: rgba(0, 0, 0, .2);

			/* 变成圆形的图形 */
			/* 右上角 */
			/* 右下角 */
			border-top-left-radius: 15px;
			border-bottom-left-radius:15px;

			text-align: right;
		}

		.circle {
			position: absolute;
			left: 50%;
			margin-left: -35px;
			bottom: 15px;
			width: 70px;
			height: 13px;
			background: rgba(255, 255, 255, .4);

			border-radius: 7px;

		}

		.circle li {
			float: left;
			margin: 3px; 
			list-style: none;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: rgba(255,255,255, 1); 
		}

		.circle li:hover {
			background-color: red;
		}

		/* 不能直接写 .current 优先级没有 .circle li  里面的白色高，所以不显示颜色，我们要使这里的优先级变得高一点 */
		.circle .current {
			background-color: #ff5000;
		}
		
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按钮 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按钮 -->
		<a href="#" class="arrow-r"> &gt;</a>
		<img src="images/taobao.jpg" alt="">

		<ul class="circle">
			<li></li>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>